import { Text, View, StyleSheet, FlatList,ImageBackground,Image } from "react-native"
import { Entypo } from "@expo/vector-icons";
import { useState, useEffect } from 'react';
import { useAuth } from "../context/AuthProvider";


const Chat = ({ navigation }) => {
    const { user } = useAuth();
    const [page, setPage] = useState(1);
    const [list, setList] = useState([]);
    const [refreshing, setRefreshing] = useState(false);

    useEffect(() => {
        fetch('http://10.7.89.174:3000/chat',
            {
                method: 'POST',
                body: JSON.stringify({
                    userName1: user.userName,

                })
            })
            .then(res => res.json())
            .then(res => {
                setRefreshing(false)
                // console.log(res)
                if (page == 1&&res.code==200) {
                    setList(res.List)
                    console.log(list)
                }
                else {
                    setList([...list, ...res.List])
                }
                
            })
    }, [page])

    const onUserChat = (AuserName,avatar) => {
        navigation.navigate('UserChat', { id: AuserName ,avatar:avatar})
    }
    // 无法触发事件
    const onEnd = () => {
        console.log(new Date());
        // setPage(page + 1)
    }
    const onRefresh = () => {
        setRefreshing(true);
        setPage(1);
    }
    const renderItem = ({ item }) => (
        <View key={item.id}>
            <View style={styles.djx8}>
            <View style={{ width: 20, height: 20,marginTop:"3%",marginLeft:"8%"}}>
                    {/* 用户头像可以在users中查询，然后把数据放入message中，但是需要一个变量来确定这个用户 */}
                    <Image source={{ uri: 'data:image/jpeg/jpg;base64,'+item.Auseravatar }}
                        style={{ width: 50, height: 50,borderRadius: 50,}} />
                </View>
                <Text style={{ marginLeft: "25%", marginTop: "-2%", fontSize: 17 }}>
                    {item.AuserName}
                </Text>
                <Text style={{ marginTop: "-7%", marginLeft: "85%" }} onPress={() => onUserChat(item.AuserName,item.avatar)}>
                    <Entypo
                        name='chevron-right'
                        size={36}
                    />
                </Text>
            </View>
        </View>
    )
    return (
        <View style={{flex:1}}>
            <ImageBackground source={require('../img/bgimg.jpg')} style={styles.bgimg}>
                <FlatList
                    ListEmptyComponent={<Text>暂无数据</Text>}
                    onRefresh={onRefresh}
                    refreshing={refreshing}
                    data={list}
                    renderItem={renderItem}
                    onEndReached={onEnd}
                    keyExtractor={item => item.id}
                />
            </ImageBackground>
        </View >
    )
}

const styles = StyleSheet.create({
    djx8: {
        width: "90%",
        height: 80,
        backgroundColor: "white",
        marginLeft: "5%",
        marginTop: 15,
        borderRadius: 23,
        borderColor: "lightgrey",
        borderWidth: 1,
    },
    bgimg:{
        flex: 1,
        resizeMode: "cover",
        justifyContent: "center"
    },
});

export default Chat